/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<      宽度      >>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

@mixin inline {
  position: relative;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
}

/* ============================== 越前优先级越低 ============================== */

.CoreBody {
  /* —————————————————————————————— percent0 到 percent100 —————————————————————————————— */
  @for $i from 0 to 101 {
    .percent#{$i} {
      @include inline;
      width: $i * 1%;
    }
  }

  /* —————————————————————————————— tenth0 到 tenth10 —————————————————————————————— */
  @for $i from 0 to 11 {
    .tenth#{$i} {
      @include inline;
      width: $i * 10%;
    }
  }

  /* —————————————————————————————— 几分之几 —————————————————————————————— */
  .full {
    height: 100%;
  }

  .minFull {
    min-height: 100%;
  }

  .maxFull {
    max-height: 100%;
  }

  .auto {
    width: auto;
  }

  .eighth7 {
    width: 87.5%;
  }

  .eighth5 {
    width: 62.5%;
  }

  .eighth3 {
    width: 37.5%;
  }

  .eighth {
    width: 12.5%;
  }

  .sixth5 {
    width: 83.33333333%;
  }

  .sixth {
    width: 16.66666667%;
  }

  .fifth4 {
    width: 80%;
  }

  .fifth3 {
    width: 60%;
  }

  .fifth2 {
    width: 40%;
  }

  .fifth {
    width: 20%;
  }

  .quar3 {
    width: 75%;
  }

  .quar {
    width: 25%;
  }

  .third2 {
    width: 66.66666667%;
  }

  .third {
    width: 33.33333333%;
  }

  .half {
    width: 50%;
  }

  .full,
  .minFull,
  .maxFull {
    position: relative;
  }

  .width,
  .half,
  .third,
  .third2,
  .quar,
  .quar3,
  .fifth4,
  .fifth3,
  .fifth2,
  .fifth,
  .sixth,
  .sixth5,
  .eighth,
  .eighth3,
  .eighth5,
  .eighth7,
  .auto,
  .whole {
    @include inline;
  }
}

.whole {
  width: 100%;
}
